<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/over/exam_paper_complete.css" />
    <title>查看答卷</title>
    <style>
        /* 瞄点样式 */
        .elDanger {
            background-color: #ffeded !important;
            border-color: #ffdbdb !important;
            color: #ff4949 !important;
        }
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
        
        /* 自定义控制锚点定位元素距离可视区域顶部的距离 */
        .anchor-element{
            /*padding-top  绝对定位后的元素距离顶部的距离*/
            padding-top: 100px;
            /*对应内边距，消除内边距撑开的距离*/
            margin-top: -100px;
        }
  
    </style>
</head>

<body>
    <section class="app-main" id="app" v-cloak>
        <div>
            <div class="do-exam-title el-row" style="background-color: rgb(245, 245, 220);">
                <div data-v-dc291498="" class="el-col el-col-24">

                    <a class="do-exam-title-tag el-tag el-tag--medium el-tag--light" v-for="(p,i) in paperQuestions"
                        :href="'#'+(i+1)" :class="{elDanger:p.answer!=p.paperQuestionInfo.correctAnswer}">{{i+1}}</a>
                    <!-- <a class="do-exam-title-tag el-tag el-tag--medium el-tag--light" v-for="(p,i) in paperQuestions"
                    :href="'#'+(i+1)" :class="{elDanger:p.answer!=p.paperQuestionInfo.correctAnswer}">{{i+1}}</a>
                    <a class="do-exam-title-tag el-tag el-tag--medium el-tag--light" v-for="(p,i) in paperQuestions"
                        :href="'#'+(i+1)" :class="{elDanger:p.answer!=p.paperQuestionInfo.correctAnswer}">{{i+1}}</a>
                    <a class="do-exam-title-tag el-tag el-tag--medium el-tag--light" v-for="(p,i) in paperQuestions"
                    :href="'#'+(i+1)" :class="{elDanger:p.answer!=p.paperQuestionInfo.correctAnswer}">{{i+1}}</a> -->
                        

                </div>
            </div>
            <section class="el-container app-item-contain is-vertical">
                <header class="el-header align-center" style="height: 60px;">
                    <h1 style="font-weight: 700;">{{examPaperResult.examPaperName}}</h1>
                    <div>
                        <span data-v-dc291498="" class="question-title-padding">试卷得分：{{examPaperResult.studentScore}}分 /
                            {{examPaperResult.paperScore}}分</span>
                        <span data-v-dc291498="" class="question-title-padding">试卷耗时：{{examPaperResult.doTime |
                            dateFormat}}</span>
                        <span data-v-dc291498="" class="question-title-padding">提交人：{{examPaperResult.userName}}</span>
                    </div>
                </header>
                <main class="el-main">
                    <form class="el-form">

                        <div class="el-row" v-if="singleCount!=0">
                            <h3>单选题</h3>
                            <div class="el-card exampaper-item-box is-always-shadow">
                                <div class="el-card__body">

                                    <div class="el-form-item exam-question-item el-form-item--medium anchor-element"
                                        v-for="(p,i) in paperQuestions.slice(0,singleCount)" :id="i+1">
                                        <label class="el-form-item__label" style="width: 50px;">{{i+1}}.</label>
                                        <div class="el-form-item__content" style="margin-left: 50px;">
                                            <div style="line-height: 1.8;">
                                                <div>
                                                    <div class="q-title" style="padding-top: 7px;">
                                                        {{p.paperQuestionInfo.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（
                                                        {{p.paperQuestionInfo.score}}分 ）</div>
                                                    <div class="q-content" style="padding-top: 15px;">
                                                        <li>
                                                            <input type="radio" :name="'questionSingle'+i"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionA"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionA==p.answer">
                                                            <span style="padding-left: 3px;">A.{{p.paperQuestionInfo.questionContentInfo.questionA}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="radio" :name="'questionSingle'+i"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionB"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionB==p.answer">
                                                        <span style="padding-left: 3px;">B.{{p.paperQuestionInfo.questionContentInfo.questionB}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="radio" :name="'questionSingle'+i"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionC"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionC==p.answer">
                                                        <span style="padding-left: 3px;">C.{{p.paperQuestionInfo.questionContentInfo.questionC}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="radio" :name="'questionSingle'+i"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionD"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionD==p.answer">
                                                        <span style="padding-left: 3px;">D.{{p.paperQuestionInfo.questionContentInfo.questionD}}</span>
                                                        </li>

                                                    </div>

                                                    <div style="width: 100%;margin-top: 30px;margin-bottom: 50px;">
                                                        <label class="label-info">
                                                            标答：<span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionA==p.paperQuestionInfo.correctAnswer">A</span>
                                                            <span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionB==p.paperQuestionInfo.correctAnswer">B</span>
                                                            <span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionC==p.paperQuestionInfo.correctAnswer">C</span>
                                                            <span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionD==p.paperQuestionInfo.correctAnswer">D</span>
                                                        </label>
                                                        <label class="label-info">
                                                            结果：<span
                                                                :class="{el_tag_success:p.doRight==1,el_tag_error:p.doRight==2}">{{p.doRight==1?'正确':'错误'}}</span>
                                                        </label>
                                                        <label class="label-info">
                                                            得分：<span>{{p.customerScore}}</span>
                                                        </label>
                                                        <label class="label-info" style="margin-top: -15px;margin-bottom: -10px;">
                                                            难度：<span :id="'rate'+i"></span>
                                                        </label>
                                                        <label class="label-info">
                                                            解析：<span>{{p.paperQuestionInfo.questionContentInfo.resolution}}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="el-row" v-if="multipleCount!=0">
                            <h3>多选题</h3>
                            <div class="el-card exampaper-item-box is-always-shadow">
                                <div class="el-card__body">

                                    <div class="el-form-item exam-question-item el-form-item--medium anchor-element"
                                        v-for="(p,i) in paperQuestions.slice(singleCount,singleCount+multipleCount)"
                                        :id="i+singleCount+1">
                                        <label class="el-form-item__label"
                                            style="width: 50px;">{{i+singleCount+1}}.</label>
                                        <div class="el-form-item__content" style="margin-left: 50px;">
                                            <div style="line-height: 1.8;">
                                                <div>
                                                    <div class="q-title" style="padding-top: 7px;">
                                                        {{p.paperQuestionInfo.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（
                                                        {{p.paperQuestionInfo.score}}分 ）</div>
                                                    <div class="q-content" style="padding-top: 15px;">
                                                        <li>
                                                            <input type="checkbox" name="questionMultiple"
                                                            style="margin-left: 20px;"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionA">
                                                            <span
                                                                style="padding-left: 8px;">A.{{p.paperQuestionInfo.questionContentInfo.questionA}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="checkbox" name="questionMultiple"
                                                            style="margin-left: 20px;"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionB">
                                                            <span
                                                                style="padding-left: 8px;">B.{{p.paperQuestionInfo.questionContentInfo.questionB}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="checkbox" name="questionMultiple"
                                                            style="margin-left: 20px;"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionC">
                                                            <span
                                                                style="padding-left: 8px;">C.{{p.paperQuestionInfo.questionContentInfo.questionC}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="checkbox" name="questionMultiple"
                                                            style="margin-left: 20px;"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionD">
                                                            <span
                                                                style="padding-left: 8px;">D.{{p.paperQuestionInfo.questionContentInfo.questionD}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="checkbox" name="questionMultiple"
                                                            style="margin-left: 20px;"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionE">
                                                            <span
                                                                style="padding-left: 8px;">E.{{p.paperQuestionInfo.questionContentInfo.questionE}}</span>
                                                        </li>

                                                    </div>

                                                    <div style="width: 100%;margin-top: 30px;margin-bottom: 50px;">
                                                        <label class="label-info">
                                                            标答：<span>{{p.paperQuestionInfo.correctAnswer}}</span>
                                                        </label>
                                                        <label class="label-info">
                                                            您的答案：<span>{{p.answer}}</span>
                                                        </label>
                                                        <label class="label-info">
                                                            结果：<span
                                                                :class="{el_tag_success:p.doRight==1,el_tag_error:p.doRight==2}">{{p.doRight==1?'正确':'错误'}}</span>
                                                        </label>
                                                        <label class="label-info">
                                                            得分：<span>{{p.customerScore}}</span>
                                                        </label>
                                                        <label class="label-info" style="margin-top: -15px;margin-bottom: -10px;">
                                                            难度：<span :id="'rate'+(i+singleCount)"></span>
                                                        </label>
                                                        <label class="label-info">
                                                            解析：<span>{{p.paperQuestionInfo.questionContentInfo.resolution}}</span>
                                                        </label>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

                        <div class="el-row" v-if="judgeCount!=0">
                            <h3>判断题</h3>
                            <div class="el-card exampaper-item-box is-always-shadow">
                                <div class="el-card__body">

                                    <div class="el-form-item exam-question-item el-form-item--medium anchor-element"
                                        v-for="(p,i) in paperQuestions.slice(singleCount+multipleCount,singleCount+multipleCount+judgeCount)"
                                        :id="i+singleCount+multipleCount+1">
                                        <label class="el-form-item__label"
                                            style="width: 50px;">{{i+singleCount+multipleCount+1}}.</label>
                                        <div class="el-form-item__content" style="margin-left: 50px;">
                                            <div style="line-height: 1.8;">
                                                <div>
                                                    <div class="q-title" style="padding-top: 7px;">
                                                        {{p.paperQuestionInfo.questionContentInfo.title}}&nbsp;&nbsp;&nbsp;（
                                                        {{p.paperQuestionInfo.score}}分 ）</div>
                                                    <div class="q-content" style="padding-top: 15px;">
                                                        <li>
                                                            <input type="radio"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionA"
                                                            :name="'questionJudge'+i"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionA==p.answer">
                                                            <span
                                                                style="padding-left: 3px;">A.{{p.paperQuestionInfo.questionContentInfo.questionA}}</span>
                                                        </li>
                                                        <li>
                                                            <input type="radio"
                                                            v-bind:value="p.paperQuestionInfo.questionContentInfo.questionB"
                                                            :name="'questionJudge'+i"
                                                            :checked="p.paperQuestionInfo.questionContentInfo.questionB==p.answer">
                                                            <span
                                                                style="padding-left: 3px;">B.{{p.paperQuestionInfo.questionContentInfo.questionB}}</span>
                                                        </li>

                                                    </div>

                                                    <div style="width: 100%;margin-top: 30px;margin-bottom: 50px;">
                                                        <label class="label-info">
                                                            标答：<span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionA==p.paperQuestionInfo.correctAnswer">A</span>
                                                            <span
                                                                v-if="p.paperQuestionInfo.questionContentInfo.questionB==p.paperQuestionInfo.correctAnswer">B</span>
                                                        </label>
                                                        <label class="label-info">
                                                            结果：<span
                                                                :class="{el_tag_success:p.doRight==1,el_tag_error:p.doRight==2}">{{p.doRight==1?'正确':'错误'}}</span>
                                                        </label>
                                                        <label class="label-info">
                                                            得分：<span>{{p.customerScore}}</span>
                                                        </label>
                                                        <label class="label-info" style="margin-top: -15px;margin-bottom: -10px;">
                                                            难度：<span :id="'rate'+(i+singleCount+multipleCount)"></span>
                                                        </label>
                                                        <label class="label-info">
                                                            解析：<span>{{p.paperQuestionInfo.questionContentInfo.resolution}}</span>
                                                        </label>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

                    </form>
                </main>
            </section>
        </div>

        <div id="back-top">
            <i class="layui-icon layui-icon-top" style="font-size: 38px;font-weight: 600;"></i>
        </div>

    </section>

    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="js/over/exam_paper_result_view.js"></script>

    <script>
        
        // 设置返回顶部按钮指定位置显示/隐藏
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $("#back-top").show()
            } else {
                $("#back-top").hide()
            }
        })
        // 点击返回顶部按钮，使得页面返回顶部
        $("#back-top").click(function () {
            scrollTo(0, 0);
        });
    </script>
</body>

</html>